<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/project.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/billing.css" />
<!-- Time Count -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/spriteTime/css/global.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/spriteTime/css/css-reset.css" />

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/spriteTime/js/jquery.spriteTimer-1.3.6.js"></script>
<script type="text/javascript">
		
		function toggleStartBtn() {
			var btn = $('#startBtn');
			if (btn.text() == 'Start Me') {
				btn.text('Stop Me');
			} else {
				btn.text('Start Me');
			}
		}

		$(document).ready(function() {
		$('.exampleC .timer').spriteTimer({
		        'digitImagePath': '<?php echo Html::imageUrl('numbers.png')?>',
				'startButton': '#startBtn',
				'resetButton': '#resetBtn',
				'startTimerCallback': toggleStartBtn,
				'stopTimerCallback': toggleStartBtn,
				'resetTimerCallback': toggleStartBtn,
				'isCountDown': false
		    });
			
			
			
			$('#stopMe').bind('mouseover', function() {
				$('.exampleD .timer').trigger('stopTimer');
			});
			$('#startMe').bind('mouseover', function() {
				$('.exampleD .timer').trigger('startTimer');
			});
			$('#resetMe').bind('mouseover', function() {
				$('.exampleD .timer').trigger('resetTimer');
			});
		});
	</script>
<div class="clear"></div>

<!--  Button Area -->
<div id="than"><img src="<?php
echo Html::imageUrl ( "muiten.png" );
?>"
	width="27" height="26" ; style="float: left">
<div id="blueBold">Billing</div>


</div>
<div class="padding15"></div>
<div id="leftSidebar">
	
	<div class="companyLogoWrap">
			<img class="companyLogo" src="<?php echo Html::imageUrl("logonho.png");?>"></img>
		</div>
	
	<h3>Total Project Time Logged</h3>
	<p>13 hours 16 minutes</p>
	<h3>Total Project Non-Billable Time</h3>
	<p>None</p>
	<h3>Total Project Billable Time</h3>
	<p>13 hours 16 minutes</p>
	
<!-- Time Counter -->

	<div class="exampleC" >

		
		<div><a href="#" id="startBtn">Start Timer</a> <a href="#" id="resetBtn">Reset</a></div>
		<br>
		<div class="timer"></div>
	</div>

</div>
<div id="rightSidebar">

<div id="rightHeader">
<h2>Time Tracking</h2>
<h2><button id="logTimeBtn" href="">Log Time</button></h2>
</div>
<div id="timeScale" >
 <table id="timeScaleTable">
 		<tr>
 			<td class="tblDes">From</td>
 			<td id ="startTime"><input type="text" ><img title="choose date" src="<?php echo Html::imageUrl('datepick.gif')?>"></img></td>
 			
 			<td class="tblDes">To</td>
 			<td id ="startTime"><input type="text"><img title="choose date" src="<?php echo Html::imageUrl('datepick.gif')?>"></img></td>
 			<td class="tblDes">Who</td>
 			<td id ="startTime">
				<select>
  				<option value="volvo">Volvo</option>
  				<option value="saab">Saab</option>
  				<option value="mercedes">Mercedes</option>
 				 <option value="audi">Audi</option>
				</select>
			</td>
			<td>
				<a href="#"><img src="<?php echo Html::imageUrl('update.jpg')?>"></img></a>
			</td>
 		</tr>
 </table>
</div>

<div id="timeTotal">
	<label class="first">Filtered Time Totals:</label>
	<label >Time Logged: <span>1&nbsp;minutes</span>  </label>
	<label>Billable: <span>1&nbsp;minutes</span> </label>
	
</div>
<table id="timeReport">

	<tr>
		<th width="80">Date</th>
		<th width="150">Who</th>
		<th  width="250">Description</th>
		<th width="150" >Task List</th>
		<th width="70">Start</th>
		<th width="60">End</th>
		<th width="70">Billable</th>
		<th width="70">Time</th>
	</tr>
	<tr height="30px">
		<td class="hardborder">08/06/2011</td>
		<td class="hardborder">Trần Ngọc Cương</td>
		<td class="hardborder">thời gian làm việc</td>
		<td class="hardborder">&nbsp;</td>
		<td class="hardborder">12:00PM</td>
		<td class="hardborder">12:01PM</td>
		<td class="hardborder">Billable</td>
		<td class="hardborder">1&nbsp;minutes</td>
	</tr>
	<tr height="30px" >
		<td colspan="7" style="text-align: right"><span class="textBold">Total</span>
		<br>
		(Between dates)
		</td>
		
		<td colspan="1" style="text-align: right"><span class="textBold">1 Minutes</span>
		</td>
	<tr>
	<tr height="30px" >
		<td colspan="7" style="text-align: right"><span class="textBold">Total</span>
		<br>
		(Between dates)
		</td>
		
		<td colspan="1" style="text-align: right"><span class="textBold">1 Minutes</span>
		</td>
	<tr>
</table>

<div id="export">
	<div class ="simpleButtonExcel">
	<img  src="<?php echo Html::imageUrl('Excel_icon.gif')?>"></img>
	
	Export to Excel
	</div>
	<div class ="simpleButtonExcel">
	<img  src="<?php echo Html::imageUrl('csv.png')?>"></img>
	
	Export to CSV
	</div>
	<div class ="simpleButtonExcel">
	<img  src="<?php echo Html::imageUrl('pdf.png')?>"></img>
	
	Export to PDF
	</div>
</div>


	

</div>
